<template>
  <div class="header-view" :style="{ height: height }">
    <!-- 左边 操作按钮 -->
    <div class="left flex-c-l">
      <!-- 后退 -->
      <el-button class="no-drag" size="mini" type="text" @click="back">
        <i class="btn el-icon-arrow-left"></i>
      </el-button>
      <!-- 前进 -->
      <el-button class="no-drag" size="mini" type="text" @click="advance">
        <i class="btn el-icon-arrow-right"></i>
      </el-button>
      <!-- 刷新 -->
      <el-button
        class="no-drag hover-color"
        size="mini"
        type="text"
        @click="refresh"
      >
        <i class="btn el-icon-refresh"></i>
      </el-button>
      <!-- 搜索框 -->
      <div class="search no-drag">
        <el-input
          size="mini"
          prefix-icon="el-icon-search"
          placeholder="搜索音乐、MV、歌单、用户"
        ></el-input>
      </div>
    </div>

    <!-- 右边控制窗体 最大化 最小化 关闭 按钮 -->
    <div class="right">
      <!-- 最小化 -->
      <el-button @click="minimize" class="no-drag" size="mini" type="text">
        <i class="btn el-icon-minus"></i>
      </el-button>
      <!-- 最大化 -->
      <!-- <el-button @click="maximize" class="no-drag" size="mini" type="text">
        <img class="btn tag quanping" src="../../assets/images/全屏.png" />
      </el-button> -->
      <!-- 关闭 -->
      <el-button
        @click="close"
        class="no-drag hover-color"
        size="mini"
        type="text"
      >
        <i class="btn el-icon-close"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
const { BrowserWindow } = require("electron");
export default {
  props: {
    height: {
      type: String,
      default: "40px"
    }
  },
  methods: {
    close() {
      this.$confirm("此操作将退出土狗云音乐, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$electron.ipcRenderer.send("close");
        //   this.$electron.ipcRenderer.send("window-all-closed");
        })
        .catch(() => {});
    },
    // maximize() {
    //   this.$electron.ipcRenderer.send("maximize");
    // },
    minimize() {
      this.$electron.ipcRenderer.send("minimize");
    },
    back() {
      if (this.$route.name !== "music") {
        this.$router.go(-1);
      }
    },
    advance() {
      this.$router.go(1);
    },
    refresh() {
      this.$bus.$emit("page-refresh", this.$route.name);
    },
    // TODO: 搜索未完成
    search(){

    }
  }
};
</script>

<style lang="scss" scoped>
.quanping {
  height: 12px;
  vertical-align: inherit;
}
.header-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /deep/ .left {
    .btn {
      font-size: 17px;
      color: #999;
    }
    .btn:hover {
      color: #31c27c;
    }
    .el-icon-refresh {
      color: #333;
    }
    .search {
      margin-left: 15px;
      width: 200px;
      .el-input__inner {
        border: none;
        border-radius: 30px;
        background: #e9e9e9;
        color: #8c8c8c;
      }
    }
  }
  .right {
    .btn {
      font-size: 17px;
      color: #333;
    }
    .btn:hover {
      color: #31c27c;
    }
  }
}
</style>
